<template>
  <div>
    <div>firstName:<input v-model="firstName"/> </div>
    <div>middleName:<input v-model="middleName"/> </div>
    <div>lastName:<input v-model="lastName"></div>
    <div>fullName:<input v-model="fullName"/></div>
  </div>
</template>

<script lang='ts' setup>
import {ref,computed} from 'vue'
 let firstName=ref<string>("zhai")
 let middleName=ref<string>("ji")
 let lastName=ref<string>("zhe")
 /**
  * 计算属性的标准写法
  */
 let fullName=computed({
   get(){
      return firstName.value+" "+middleName.value+" "+lastName.value
   },
   set(v : string) {
     let ary=v.split(" ")
     firstName.value=ary[0]
     middleName.value=ary[1]
     lastName.value=ary[2]
     
   }
   
   
 })
</script>

<style lang='scss' scoped>
</style>